<template>
  <div id="app">
    <!-- @click:使用jq的代码来实现一些功能 -->
    <!-- ref:获取dom节点 -->
    <!-- <img id="img"
      @click="toggle"
      ref="img1"
      src="./assets/logo.png"
    > -->
    <!-- <eat></eat> -->
    <!-- <hr>
    <span>父组件：</span> -->
    <!-- 1.通过标签属性的方式，传值 -->
    <!-- <input v-model="info">
    <child :msg="info" :msg2="666"></child>
    <hr> -->
    <!-- <hr>
    <child1
      :info1="msg"
      :info2="msg2"
      :info4="msg4"
    ></child1>
    <hr> -->
    <!-- <hr>
    <child2
      @tran="getDate"
      @tranTwo="getDate2"
    ></child2>
    <hr> -->
    <!-- <hr>
    <child3 ref="child3"></child3>
    <hr>
    <p>以下是匿名插槽和具名插槽：</p>
    <child4>
      <h1 slot="top">1234</h1>
      <mark slot="bot">7777</mark>
    </child4> -->
    <!-- <p>以下是作用域插槽时间：</p> -->
    <!-- <child5> -->
      <!-- 作用域插槽一定是具名插槽，所以先通过v-slot找到对应的插槽，才能接受他的数据 -->
      <!-- <template v-slot:list="props">
        <li>
          <img src="" :alt="'我是第'+props.item+'张图片'">
          <button @click="change(props.item)">click</button>
        </li>
      </template>
    </child5> -->
    <!-- <table>
      <tr>
        <td is="child6"></td>
      </tr>
    </table> -->
    <!-- 路由出口，切换组件：url不同，他就变成不同的组件，他是一个会变的组件 -->
    <!-- 变化的规则就是路由表的内容 -->
    今年：{{$store.state.age}}
    <router-view/>
  </div>
</template>

<script>
import eatwe from './components/Eat'
import child from './components/day05'
import child1 from './components/day05validator'
import child2 from './components/day05zichuanfu'
import child3 from './components/taoyuanjieyi'
import child4 from './components/day05slot'
import child5 from './components/day05slot-scope'
import child6 from './components/day05is'
export default {
  name: 'App',
  data() {
    return {
      info: '我是父组件中的数据，子组件没有这个数据，所以传给他',
      msg: 666,
      msg2: '1234',
      msg3: '1234',
      msg4: {name: 'Jack'}
    }
  },
  components: {
    eat:eatwe,
    child,
    child1,
    child2,
    child3,
    child4,
    child5,
    child6
  },
  mounted() {
    // console.log(123,this.$refs.img1);
    // console.log(456,this.$refs.child3);
    // console.log('我的作用就是找到对应的dom节点或者子组件，进而控制他们');
  },
  methods: {
    // 监听子组件发射的自定义事件
    // val就是传过来的值
    getDate(val1, val2, val3) {
      console.log(val1, val2, val3);
    },
    getDate2(val1) {
      console.log(111,val1);
    },
    // 使用jq的代码来实现一些功能
    toggle() {
      this.$('#img').fadeToggle(1000)
    },
    change(val) {
      console.log(val);
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
